<template>
    <app-page>
        <div class="ip-index">
            <div class="ip-text">
                <div>
                    在添加平台会员的时候，可选择【共享】和【独享】IP，不同的IP类型账号属性不同，使用独享IP的会员账号，在智投软件中仅个人能够使用，使用共享IP的会员账号，个人无法使用，用于分享给他人使用，他人若使用了共享账号进行下单，智投将为订单进行担保交收。
                </div>
            </div>
            <div class="ip-cards">
                <div class="card">
                    <img src="@/assets/ip/ipfree.png" style="width:88px;height: 88px;margin-right: 48px" alt="">
                    <div class="card_list">
                        <div class="card_title">共享账号：IP 免费</div>
                        <div class="card_text">
                            无需支付任何费用，可免费使用共享IP，IP地址可选择地区，根据自身网络所在地，选择最佳地区IP，每个IP与平台账号均一对一独立使用，有效防止平台对IP的风控。</div>
                        <!-- <div class="card_button">3</div> -->
                    </div>
                </div>
                <div class="card">
                    <img src="@/assets/ip/ip-100.png" style="width:88px;height: 88px;margin-right: 48px" alt="">
                    <div class="card_list">
                        <div class="card_title">独享账号：IP 100能量/周</div>
                        <div class="card_text">
                            需按指定价格支付IP使用费，独享IP可选择地区，根据自身网络所在地，选择最佳地区IP，需提前购买IP，再添加账号，否则影响平台账号正常添加，点击购买IP。</div>
                        <div class="card_button">
                            <div class="buy_ip" @click="openBuyip()">买IP</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </app-page>
</template>

<script setup>
const router = useRouter()
const openBuyip = () => {
    router.replace('buyip')
}
</script>

<style lang="scss" scoped>
.ip-index {
    width: 100%;
    height: 100%;
    background-color: #fff;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.ip-text {
    width: 100%;
    height: 64px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    background-color: #fff9e6;
    font-family: AlibabaPuHuiTi_2_55_;
    font-size: 14px;
    color: #333;
}

.ip-cards {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 64px;

    .card {
        width: 1000px;
        padding: 48px 64px 48px 48px;
        border: solid 1px #ebebeb;
        display: flex;
        margin-bottom: 24px;

        .card_list {
            display: flex;
            flex-direction: column;

            .card_title {
                font-size: 20px;
                font-family: PingFangSC;
                font-weight: 600;
                color: #333;
            }

            .card_text {
                margin-top: 12px;
                font-family: PingFangSC;
                font-size: 16px;
                color: #333;
            }

            .card_button {
                margin-top: 24px;

                .buy_ip {
                    width: 240px;
                    height: 48px;
                    background-color: var(--pcmain-color);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 16px;
                    font-weight: 600;
                    color: #fff;
                    cursor: pointer;
                }
            }
        }
    }
}
</style>